<template>
    <div class="code-rain-container">
        <canvas class="code-rain-content" :width=canvasWidth :height=canvasHeight></canvas>
    </div>
</template>

<script>

export default {
    name: "CodeRain",
    components: {},
    data() {
        return {
            str: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
                'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
                'U', 'V', 'W', 'X', 'Y', 'Z', '!', '@', '#', '$', '%',
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
                'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
                'u', 'v', 'w', 'x', 'y', 'z'],
            ctx: null,
            canvasWidth: 0,
            canvasHeight: 0,
            arr: null,
            speed:50,
            col:20,
        }
    },
    computed: {},
    methods: {
        randomChar() {
            return this.str[Math.floor(Math.random() * this.str.length)];
        },
        rain() {
            this.ctx.fillStyle = "rgba(0,0,20,0.05)";
            this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
            this.ctx.fillStyle = "#00c8aa";
            this.arr.forEach(this.draw);
        },
        draw(value, index) {
            this.ctx.fillText(this.randomChar(), index * this.col, value + this.col);

            this.arr[index] = value >= this.canvasHeight||value >9000*Math.random() ? 0 : value + this.col;
        },
    },
    created() {

    },
    mounted() {
        const container = this.$el;
        const canvas = this.canvas = this.$el.querySelector(".code-rain-content");
        this.canvasWidth = container.offsetWidth;
        this.canvasHeight = container.offsetHeight;
        this.ctx = canvas.getContext("2d");
        this.arr=Array(Math.ceil(this.canvasWidth/this.col)).fill(0);

        this.ctx.font=this.col+"px Arial";

        setInterval(this.rain,this.speed);
    },
}
</script>

<style scoped>
.code-rain-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.code-rain-content{
    width: 100%;
    height: 100%;
}
</style>